import React, { Component, createRef } from 'react'
import { Modal, Form, message, Checkbox } from 'antd'
import { post } from '../../lib'
import { FormTextItem } from '../../components/index'
// import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
// import styles from './index.module.css'
import ImageUpload from '@/components/ImageUpload/ImageUpload'
import store from '@/store' // 引入全局状态

export default class Detail extends Component {
  // 创建一个form的引用
  formRef = createRef()
  imageRef = createRef() // 图片组件的引用
  state = {
    visible: false, // 是否显示
    record: null, // 传过来的值
    isModify: false, // 是否是修改
    isMofifyPersonal: false, //是否式修改个人信息
  }
  // 提供一个方法给父组件打开这个弹窗
  // isMofifyPersonal是否式修改个人信息
  show = (record, isMofifyPersonal) => {
    this.setState({
      visible: true,
      record,
      isModify: !!record, // 如果传了record，就是修改，否则就是新增
      isMofifyPersonal,
    })
  }
  submit = async () => {
    // 提交接口
    const { record, isModify, isMofifyPersonal } = this.state
    const { refreshList } = this.props // 父组件传下来的属性列表函数
    const values = await this.formRef.current.validateFields().catch((e) => {})
    if (!values) return
  
    // return console.log('=================values', values);
    // 如果是修改，需要设置id
    let url = '/create/reactrole'
    if (isModify) {
      values.id = record.id
      url = '/modify/reactrole'
    }
    const data = await post(url, values)
    if (!data.success) {
      return alert(data.message)
    }
    message.success(isModify ? '修改成功' : '新增成功')
    if (isMofifyPersonal) {
      // 如果是修改个人信息
      // 更新全局的状态
      store.dispatch({ type: 'setPersonal', payload: data.result })
      // this.props.setPersonal(data.result); // 使用map封装的属性调用
    } else {
      // 刷新列表
      refreshList && refreshList() // 先判断一下
    }
    this.setState({ visible: false })
  }

  render() {
    const { visible, record, isModify, isMofifyPersonal } = this.state
    return (
      visible && ( // 直接刷新一下dom
        <Modal
          title={
            isMofifyPersonal
              ? '修改个人信息'
              : isModify
              ? '修改角色'
              : '新增角色'
          }
          centered
          open={visible}
          onOk={this.submit}
          onCancel={() => this.setState({ visible: false })}
          width={800}
        >
          <Form
            ref={this.formRef}
            name='basic'
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              // 初始值
              name: record?.name, // 修改传过来的初始值
              description: record?.description,
              authority: record?.authority,
            }}
            autoComplete='off'
          >
            <FormTextItem label='角色名' name='name' type='name' />
            <FormTextItem label='角色简介' name='description' type='description' />

            <Form.Item
              label='角色权限'
              name='authority' /* 字段名称 */
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Checkbox.Group value={this.state.checkedValues}>
                <Checkbox value={1}>权限一</Checkbox>
                <Checkbox value={2}>权限二</Checkbox>
                <Checkbox value={3}>权限三</Checkbox>
                <Checkbox value={4}>权限四</Checkbox>
                <Checkbox value={5}>权限五</Checkbox>
                <Checkbox value={6}>权限六</Checkbox>
                <Checkbox value={7}>权限七</Checkbox>
                <Checkbox value={8}>权限八</Checkbox>
              </Checkbox.Group>
            </Form.Item>
          </Form>
        </Modal>
      )
    )
  }
}

// export default connect(null, dispatch => ({ // dispatch 等价于 store.dispath
//   setPersonal: function(info) {
//     dispatch({ type: 'setPersonal', payload: info });
//   }
// }))(Detail);
